.form-drawer-box {
  .left-editor {
    position: relative;
    height: 100%;
    background: #1e1e1e;
    overflow: hidden;
    .setting {
      position: absolute;
      right: 15px;
      top: 3px;
      color: #a9f122;
      font-size: 18px;
      cursor: pointer;
      z-index: 1;
    }
    .editor-tabs{
      @editorTabsBorderColor : #121315;
      background: @editorTabsBorderColor;
      .el-tabs__header{
        margin: 0;
        border-bottom-color: @editorTabsBorderColor;
        .el-tabs__nav{
          border-color: @editorTabsBorderColor;
        }
      }
      .el-tabs__item{
        height: 32px;
        line-height: 32px;
        color: #888a8e;
        border-left: 1px solid @editorTabsBorderColor !important;
        background: #363636;
        margin-right: 5px;
        user-select: none;
      }
      .el-tabs__item.is-active{
        background: #1e1e1e;
        border-bottom-color: #1e1e1e!important;
        color: #fff;
      }
      .el-icon-edit{
        color: #f1fa8c;
      }
      .el-icon-document{
        color: #a95812;
      }
      :focus.is-active.is-focus:not(:active) {
        box-shadow: none;
        border-radius: 0;
      }
    }
    .tab-editor {
      position: absolute;
      top: 33px;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 14px;
    }
  }
  .right-preview {
    height: 100%;
    .result-wrapper {
      height: calc(100vh - 33px);
      width: 100%;
      overflow: auto;
      padding: 12px;
      box-sizing: border-box;
    }
  }

}
